<template>
<div class="home_index">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <div>营业总额</div>
          <div>{{total.money}}</div>
        </div>
      </el-col>
       <el-col :span="3">
        <div class="grid-content bg-purple-light">
         <div>会员总数</div>
          <div>{{total.user_count}}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple">
         <div>预约总数</div>
          <div>{{total.mark_count}}</div>
        </div>
      </el-col>
       <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <div>消耗总额</div>
          <div>{{total.consume_count}}</div>
        </div>
      </el-col>
       <el-col :span="3">
        <div class="grid-content bg-purple-light">
         <div>月度新增</div>
          <div>{{total.month_count}}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple" @click="birthDilog">
         <div>生日提醒</div>
          <div>{{total.birth_count}}</div>
        </div>
      </el-col>
    </el-row>
    <div ref="monthChart" style="width:98%; height: 400px;margin-top:20px;"></div>
    <div ref="yearChart" style="width:98%; height: 400px;"></div>
    <birthTable :show="birthTableShow" :list="list" @func="birthDilog"></birthTable>
</div>
</template>
<script>
import birthTable from "./birthTable"
export default {
    name: 'index',
     components: {
      "birthTable": birthTable
    },
    data () {
        return {
            monthDataX:[],
            goodsData:[],
            rechargeData:[],
            cardData:[],
            yearData:[],
            yearDataX:[],
            total:{},
            list:[],
            birthTableShow:false
        }
    },
    created:function (){
        this.getCount()
    },
    mounted:function(){
        this.getMonth()
        //this.initEcharts()
    },
    methods: {
      birthDilog:function(){
        if(!this.birthTableShow && this.list.length == 0){
          var data = {oa_id:localStorage.getItem('oa_id')}
          var that = this
          this.$get('pc/user/birth',data).then((res) => {
              that.list = res.data
          })
        }
        this.birthTableShow = !this.birthTableShow
      },
        getCount:function(){
            var data = {oa_id:localStorage.getItem('oa_id')}
            var that = this
            this.$get('pc/data/count',data).then((res) => {
                that.total = res.data
            })
        },
        getMonth:function(){
            var data = {oa_id:localStorage.getItem('oa_id')}
            var that = this
            this.$get('pc/data/month',data).then((res) => {
                that.monthDataX = res.data.monthDataX
                that.rechargeData = res.data.rechargeData
                that.cardData = res.data.cardData
                that.goodsData = res.data.goodsData
                that.yearDataX = res.data.yearDataX
                that.yearData = res.data.yearData
                that.initEcharts()
            })
        },
        initEcharts:function(){
            var that = this
            var monthChart = this.$refs.monthChart
            var myMonthChart = this.$echarts.init(monthChart)
            var yearChart = this.$refs.yearChart
            var myYearChart = this.$echarts.init(yearChart)
            var option = {
                title:{
                    text:'月度统计'
                },
                legend:{
                    //data:['访问量','用户量']
                    data:['充值金额统计','购卡金额统计','家居购买金额统计']
                },
                xAxis:{
                    data:that.monthDataX
                },
                yAxis: {
                    type: 'value'
                },
                series:[
                    {
                        name:'充值金额统计',
                        type:'bar',
                        data:that.rechargeData
                    },
                    {
                        name:'购卡金额统计',
                        type:'bar',
                        data:that.cardData
                    },
                    {
                        name:'家居购买金额统计',
                        type:'bar',
                        data:that.goodsData
                    }
                ]
            };
            var yearOption = {
                title:{
                    text:"年度营业额统计"
                },
                //图例组件
                legend:{
                     data:['年度营业额统计']
                },
                //配置要在X轴显示的项
                xAxis:{
                    data:that.yearDataX
                },
                yAxis: {
                    type: 'value'
                },
                //配置要在Y轴显示的项

                //系列列表：每个系列通过Type决定自己的图表类型
                series:[
                    {
                    name:"年度营业额统计",  //系列名称
                    data:that.yearData,
                    type:"line",   //系列图表类型(折线图或面积图)
                    smooth:true,
                }],
                tooltip : {
                    
                }
            };
            myMonthChart.setOption(option);
            myYearChart.setOption(yearOption);
        }
    }
}
</script>
<style>
.home_index{
    padding:15px 20px 10px 20px;
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    height: 80px;
    text-align:center;
    display: flex;
    flex-direction:column;
    justify-content:center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>